<template>
	<view class="productBrief">
		<view class="productBrief_price">
			<vanIcon name="gold-coin" color="gold" />
			{{price}}
		</view>
		<view class="productBrief_name">
			{{name}}
		</view>
		<view class="productBrief_context">
			{{context}}
		</view>
		<view class="productBrief_control">
			<view class="productBrief_control_toStore">
				<vanIcon name="shop-o" color="red"></vanIcon>前往商家店铺
			</view>
			<view class="productBrief_control_toLove">
				<vanIcon name="like-o" color="red"></vanIcon>收藏
			</view>
		</view>
	</view>
</template>

<script>
	import vanIcon from '@/wxcomponents/vant/@vant/icon/index.js'
	export default{
		data(){
			return{
				price:'100',
				context:'ssssssssssss',
				name:'xxxx'
			}
		},
		components:{vanIcon}
	}
</script>

<style lang="less">
	.productBrief{
		width: 98%;
		background-color: #fff;
		margin: 1rem auto;
		box-sizing: border-box;
		padding: 1rem;
		border-radius: 1rem;
		.productBrief_price{
			color: red;
			font-size: 1.4rem;
		}
		.productBrief_name{
			font-weight: 650;
			font-size: 1.6rem;
		}
		.productBrief_context{
			color: #333;
		}
		.productBrief_control{
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: .2rem;
			color: #999;
			van-icon{
				margin: 0 .2rem;
			}
		}
	}
</style>